<template>
  <div id='temp'>
      <!--提交评论  -->
        <div id="postComments">
            <h3>提交评论</h3>
            <p></p>
            <textarea v-model='postcontent' placeholder="请输入您的评论"></textarea>
            <mt-button @click='postComments()' type="primary" size="large">发表</mt-button>
            
        </div>
        <!--获取评论  -->
        <div id="getComments">
            <h3>评论列表</h3>
            <div v-for="(item,index) in list" :key="index">
                <div class="title">
                    <span>第{{index+1}}楼</span>
                    <span>{{item.user_name}}</span>
                    <span>{{item.add_time | datefmt("YYYY-MM-DD")}}</span>
                </div>
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell" v-text="item.content"></li>
                </ul>  
            </div>      
        </div>
        <!--加载更多  -->
       <mt-button @click='getmore()' type="danger" size="large">加载更多</mt-button>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
import common from "../../kits/common.js";
export default {
  props:["id"],//接收父组件传来的id值
    data () {
        return {
            postcontent:'',
            list:[],
            pagesize:1
        };
    },
    //created在页面加载完成前已经出发
    created(){
        this.getLists(this.pagesize);
    },
    methods:{
        //加载更多
        getmore(){
            this.pagesize++;
            this.getLists(this.pagesize);
        },
        getLists(pagesize){
            pagesize=pagesize||1;
            var url=common.apidomain+'/api/getcomments/'+this.id+'?pageindex='+pagesize;
            this.$http.get(url).then(function(res){
                if(res.body.status!=0){
                    Toast(res.body.message);
                    return;
                }
                // 追加数据到上一次的数组中
                this.list=this.list.concat(res.body.message);
                //使用apply实现
                //this.list.push.apply(this.list,res.body.message)
            })
        },
        postComments(){
            //输入的内容不能为空字符串
            if(this.postcontent.trim().length<=0){
                Toast("内容不能为空");
                return ;
            }
            var url=common.apidomain+'/api/postcomment/'+this.id;
            this.$http.post(url,{content:this.postcontent},{emulateJSON:true}).then(function(res){
                if(res.body.status==0){
                    Toast (res.body.message);
                    
                //在查看评论的过程中，自己再新加一条数据，让数据仍然显示在第一条，后面的数据也不会刷新
                    //假如已经查看到第三页，重新获取数据就会重新跳转回到第一页
                    //this.getLists(this.pagesize);
                    this.list=[{
                        "user_name":"匿名用户",
                        "add_time":new Date(),
                        "content":this.postcontent
                    }].concat(this.list);
                    //使用unshift实现
                    /* this.list.unshift({
                         "user_name":"匿名用户",
                        "add_time":new Date(),
                        "content":this.postcontent
                    }) */

                    //清空输入框 
                    this.postcontent='';
                }
            })
        }
    }
}
</script>
<style scoped>
    #postComments{
        padding:5px;
    }
    #postComments p{
       width: 100%;
       height: 1px;
       background-color: rgba(0,0,0,.3);
    }

    /*列表样式  */
    #getComments{
        padding:5px;
    }
    .title{
        margin: 20px 15px 7px;
        color: #6d6d72;
        font-size: 15px;
        background:rgba(0,0,0,.1);
    }
    .mint-button--danger{
        background:#fff;
        color:#ef4f4f;
        border:1px solid #ef4f4f;
    }      

</style>